<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>how2solutions-2api - 管理面板</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f4f7f9; color: #333; margin: 0; padding: 2rem; }
        .container { max-width: 900px; margin: auto; background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
        h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
        .stat-card { background-color: #ecf0f1; padding: 1.5rem; border-radius: 8px; text-align: center; }
        .stat-card h3 { margin: 0 0 10px 0; color: #7f8c8d; font-size: 1rem; text-transform: uppercase; }
        .stat-card p { margin: 0; font-size: 2.5rem; font-weight: bold; color: #34495e; }
        #workers-table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
        #workers-table th, #workers-table td { border: 1px solid #ddd; padding: 12px; text-align: left; word-break: break-all; }
        #workers-table th { background-color: #3498db; color: white; }
        #workers-table tr:nth-child(even) { background-color: #f2f2f2; }
        #last-updated { margin-top: 1rem; font-style: italic; color: #95a5a6; }
        .error { color: #e74c3c; font-weight: bold; background-color: #fdd; padding: 1rem; border-radius: 5px; margin-bottom: 1rem; }
    </style>
</head>
<body>
    <div class="container">
        <h1>how2solutions-2api - Worker 状态面板</h1>
        <div id="error-message" class="error" style="display: none;"></div>
        <div class="stats-grid">
            <div class="stat-card">
                <h3>活跃 / 目标 Worker</h3>
                <p><span id="pool-size">...</span> / <span id="target-pool-size">...</span></p>
            </div>
            <div class="stat-card">
                <h3>总创建数</h3>
                <p id="total-created">...</p>
            </div>
            <div class="stat-card">
                <h3>创建失败</h3>
                <p id="total-failed">...</p>
            </div>
            <div class="stat-card">
                <h3>总回收数</h3>
                <p id="total-retired">...</p>
            </div>
        </div>

        <h2>活跃 Worker 列表</h2>
        <table id="workers-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Nonce</th>
                    <th>总失败次数</th>
                    <th>连续失败</th>
                </tr>
            </thead>
            <tbody id="workers-body">
                <tr><td colspan="4" style="text-align: center;">正在加载...</td></tr>
            </tbody>
        </table>
        <p id="last-updated">最后更新: ...</p>
    </div>

    <script>
        const apiKey = prompt("请输入您的 API Master Key:", "sk-how2solutions-default-key");

        async function fetchStatus() {
            const errorMessage = document.getElementById('error-message');
            try {
                if (!apiKey) {
                    errorMessage.textContent = "未提供 API Key。已停止刷新。";
                    errorMessage.style.display = 'block';
                    return;
                }
                const response = await fetch('/status', {
                    headers: {
                        'Authorization': `Bearer ${apiKey}`
                    }
                });

                if (!response.ok) {
                    const errorText = await response.text();
                    throw new Error(`HTTP 错误! 状态: ${response.status}. 响应: ${errorText}. 请检查您的 API Key 或服务日志。`);
                }
                
                const data = await response.json();
                errorMessage.style.display = 'none';

                document.getElementById('pool-size').textContent = data.pool_size;
                document.getElementById('target-pool-size').textContent = data.target_pool_size;
                document.getElementById('total-created').textContent = data.total_created;
                document.getElementById('total-failed').textContent = data.total_failed_creations;
                document.getElementById('total-retired').textContent = data.total_retired;
                document.getElementById('last-updated').textContent = `最后更新: ${new Date().toLocaleTimeString()}`;

                const workersBody = document.getElementById('workers-body');
                workersBody.innerHTML = '';

                if (data.workers.length === 0) {
                    workersBody.innerHTML = '<tr><td colspan="4" style="text-align: center;">当前没有活跃的 Worker。</td></tr>';
                } else {
                    data.workers.forEach((workerStr, index) => {
                        const nonceMatch = workerStr.match(/nonce='([^']*)'/);
                        const failedMatch = workerStr.match(/failed=([\d]+)/);
                        const consecutiveMatch = workerStr.match(/consecutive_fails=